<template>
  <ul class="my-sidebar">
    <li class="sidebar-item">
        <a href="javascript:;">English</a>
    </li>
    <li class="sidebar-item active">
        <a href="javascript:;">Chinese</a>
    </li>
    <li class="sidebar-item">
        <a href="javascript:;">Match</a>
    </li>
    <li class="sidebar-item">
        <a href="javascript:;">Music</a>
    </li>
  </ul>
</template>

<script>
export default {
    name: 'MySidebar'
}
</script>

<style lang="scss">
li,
ul {
    list-style: none;
    padding: 0;
}

.sidebar-item {
    height: 44px;
    padding: 0 20px;
    line-height: 44px;
    box-sizing: border-box;
    

    &.active {
        background-color: rgb(211, 243, 109);

        a{
            color: rgb(135, 208, 244);
        }
    }

    a {
        font-size: 20px;
        color: rgb(133, 241, 182);
    }
}
</style>
